<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
    <link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"/>
    <script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
    <script>
        $(function () {
            /*$('#dropdown_1').on('show.bs.dropdown', function () {
                alert('在调用 show 方法时立即触发！');
            });
            $('#dropdown_1').on('shown.bs.dropdown', function () {
                alert('在下拉菜单完全显示出来，并且等 CSS 动画完成之后触发！');
            });
            $('#dropdown_1').on('hide.bs.dropdown', function () {
                alert('在 hide 方法调用时，但还未关闭隐藏时触发！');
            });
            $('#dropdown_1').on('hidden.bs.dropdown', function () {
                alert('在下拉菜单完全隐藏之后，并且等 CSS 动画完成之后触发！');
            });*/


            $("#dropdown_1").change(function () {
                alert("您点击了的内容-->" + $(this).val());
            });
        });

    </script>
    <style>
        body {
            margin: 40px;
        }
    </style>
</head>
<body>


<!-- 2.2 下拉菜单 -->
<!-- 下拉菜单 -->
<hr/>
<hr/>
<div style="margin: 20px" id="dropdown_1" class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdown_menu_1" data-toggle="dropdown">
        http://catface.cc
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdown_menu_1">
        <li>
            <div onclick="alert($(this).val)">html</div>
        </li>
        <li role="presentation">
            <button href="#" onclick="alert($(this).val)">css</button>
        </li>
        <li role="presentation">
            <a href="#" onclick="alert($(this).val)">ajax</a>
        </li>
    </ul>
</div>

<!-- 带不可点击的标题 -->
<div style="margin: 20px" class="dropdown">
    <button class="btn dropdown-toggle" data-toggle="dropdown">
        http://catface.cc
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdown_menu_2">
        <li class="dropdown-header">
            静态页面(不可点)
        </li>
        <li>
            <a href="#">html</a>
        </li>
        <li>
            <a href="#">css</a>
        </li>
        <li class="dropdown-header">
            动态页面(不可点)
        </li>
        <li>
            <a href="#">js</a>
        </li>
        <li>
            <a href="#">ajax</a>
        </li>
    </ul>
</div>
<!-- 带分割线 -->
<div style="margin: 20px" class="dropdown">
    <button class="btn dropdown-toggle" data-toggle="dropdown">
        http://catface.cc
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdown_menu_2">
        <li class="dropdown-header">
            静态页面(不可点)
        </li>
        <li>
            <a href="#">html</a>
        </li>
        <li>
            <a href="#">css</a>
        </li>
        <li class="divider">
        </li>
        <li class="dropdown-header">
            动态页面(不可点)
        </li>
        <li>
            <a href="#">js</a>
        </li>
        <li>
            <a href="#">ajax</a>
        </li>
    </ul>
</div>
<!-- 带禁用项 -->
<div style="margin: 20px" class="dropdown">
    <button class="btn dropdown-toggle" data-toggle="dropdown">
        http://catface.cc
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdown_menu_2">
        <li class="dropdown-header">
            静态页面(不可点)
        </li>
        <li>
            <a href="#">html</a>
        </li>
        <li>
            <a href="#">css</a>
        </li>
        <li class="divider">
        </li>
        <li class="dropdown-header">
            动态页面(不可点)
        </li>
        <li>
            <a href="#">js</a>
        </li>
        <li>
            <a href="#">ajax</a>
        </li>
        <li class="disabled">
            <a href="#">bootstrap(正在开发)</a>
        </li>
    </ul>
</div>
<hr/>


<!-- 2.3 按钮组 -->
<!-- 默认按钮组 -->
<div class="btn-group" aria-label="web">
    <button class="btn btn-default">html</button>
    <button class="btn btn-default">css</button>
    <button class="btn btn-default">js</button>
</div>
<!-- 按钮工具组 -->
<div style="margin-top: 20px" class="btn-toolbar" aria-label="study">
    <div class="btn-group" aria-label="java">
        <button class="btn btn-default">base</button>
        <button class="btn btn-default">junior</button>
        <button class="btn btn-default">senior</button>
    </div>
    <div class="btn-group" aria-label="web">
        <button class="btn btn-default">html</button>
        <button class="btn btn-default">css</button>
        <button class="btn btn-default">js</button>
    </div>
    <div class="btn-group" aria-label="framework">
        <button class="btn btn-default">Spring</button>
        <button class="btn btn-default">SpringMVC</button>
        <button class="btn btn-default">Mybatis</button>
    </div>
</div>
<br/>
<!-- 按钮组大小 -->
<div style="margin-left: 20px" class="btn-group btn-group-lg" aria-label="web">
    <button class="btn btn-default">html</button>
    <button class="btn btn-default">css</button>
    <button class="btn btn-default">js</button>
</div>
<div class="btn-group btn-group" aria-label="web">
    <button class="btn btn-default">html</button>
    <button class="btn btn-default">css</button>
    <button class="btn btn-default">js</button>
</div>
<div class="btn-group btn-group-sm" aria-label="web">
    <button class="btn btn-default">html</button>
    <button class="btn btn-default">css</button>
    <button class="btn btn-default">js</button>
</div>
<div class="btn-group btn-group-xs" aria-label="web">
    <button class="btn btn-default">html</button>
    <button class="btn btn-default">css</button>
    <button class="btn btn-default">js</button>
</div>
<br/>
<!-- 垂直排列 -->
<div style="margin-top: 20px" class="btn-group-vertical" aria-label="web">
    <button class="btn btn-default">html</button>
    <button class="btn btn-default">css</button>
    <button class="btn btn-default">js</button>
</div>
<br/>
<!-- 复选框 -->
<div style="margin-top: 20px" class="btn-group" data-toggle="buttons">
    <label class="btn btn-default active">
        <input type="checkbox" checked="checked"/>LOL(默认选中-复选框)
    </label>
    <label class="btn btn-default">
        <input type="checkbox"/>DOTA
    </label>
    <label class="btn btn-default">
        <input type="checkbox"/>WOW
    </label>
</div>
<br/>
<!-- 单选框 -->
<div style="margin-top: 20px" class="btn-group" data-toggle="buttons">
    <label class="btn btn-default active">
        <input type="radio" checked="checked"/>LOL(默认选中-单选框)
    </label>
    <label class="btn btn-default">
        <input type="radio"/> DOTA
    </label>
    <label class="btn btn-default">
        <input type="radio"/> WOW
    </label>
</div>
<hr/>


<!-- 2.4 按钮式下拉菜单 -->
<!-- 但按钮下拉菜单 -->
<div class="btn-group">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        default
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li>
            <a href="#">html</a>
        </li>
        <li>
            <a href="#">css</a>
        </li>
        <li>
            <a href="#">js</a>
        </li>
    </ul>
</div>
<div class="btn-group">
    <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
        primary
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li>
            <a href="#">html</a>
        </li>
        <li>
            <a href="#">css</a>
        </li>
        <li>
            <a href="#">js</a>
        </li>
    </ul>
</div>
<div class="btn-group">
    <button class="btn btn-success dropdown-toggle" data-toggle="dropdown">
        success
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li>
            <a href="#">html</a>
        </li>
        <li>
            <a href="#">css</a>
        </li>
        <li>
            <a href="#">js</a>
        </li>
    </ul>
</div>
<div class="btn-group">
    <button class="btn btn-info dropdown-toggle" data-toggle="dropdown">
        info
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li>
            <a href="#">html</a>
        </li>
        <li>
            <a href="#">css</a>
        </li>
        <li>
            <a href="#">js</a>
        </li>
    </ul>
</div>
<div class="btn-group">
    <button class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
        warning
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li>
            <a href="#">html</a>
        </li>
        <li>
            <a href="#">css</a>
        </li>
        <li>
            <a href="#">js</a>
        </li>
    </ul>
</div>
<div class="btn-group">
    <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
        danger
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li>
            <a href="#">html</a>
        </li>
        <li>
            <a href="#">css</a>
        </li>
        <li>
            <a href="#">js</a>
        </li>
    </ul>
</div>
<!-- 分列式按钮下拉菜单 -->
<div class="btn-group">
    <button type="button" class="btn btn-default">默认</button>
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li>
            <a href="#">HTML</a>
        </li>
        <li>
            <a href="#">CSS</a>
        </li>

        <li>
            <a href="#">Javascript</a>
        </li>
        <li>
            <a href="#">AJAX</a>
        </li>
    </ul>
</div>
<!-- 按钮大小 -->
<div class="btn-group">
    <button type="button" class="btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown">
        大号
        <span class="caret"></span></button>
    <ul class="dropdown-menu">
        <li>
            <a href="#">HTML</a>
        </li>
        <li>
            <a href="#">CSS</a>
        </li>

        <li>
            <a href="#">Javascript</a>
        </li>
        <li>
            <a href="#">AJAX</a>
        </li>
    </ul>
</div>
<div class="btn-group">
    <button type="button" class="btn btn btn-default dropdown-toggle" data-toggle="dropdown">
        默认
        <span class="caret"></span></button>
    <ul class="dropdown-menu">
        <li>
            <a href="#">HTML</a>
        </li>
        <li>
            <a href="#">CSS</a>
        </li>

        <li>
            <a href="#">Javascript</a>
        </li>
        <li>
            <a href="#">AJAX</a>
        </li>
    </ul>
</div>
<div class="btn-group">
    <button type="button" class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown">
        小号
        <span class="caret"></span></button>
    <ul class="dropdown-menu">
        <li>
            <a href="#">HTML</a>
        </li>
        <li>
            <a href="#">CSS</a>
        </li>

        <li>
            <a href="#">Javascript</a>
        </li>
        <li>
            <a href="#">AJAX</a>
        </li>
    </ul>
</div>
<div class="btn-group">
    <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">
        最小号
        <span class="caret"></span></button>
    <ul class="dropdown-menu">
        <li>
            <a href="#">HTML</a>
        </li>
        <li>
            <a href="#">CSS</a>
        </li>

        <li>
            <a href="#">Javascript</a>
        </li>
        <li>
            <a href="#">AJAX</a>
        </li>
    </ul>
</div>
<!-- 向上弹出菜单 -->
<div class="btn btn-group dropup">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        最小号
        <span class="caret"></span></button>
    <ul class="dropdown-menu">
        <li>
            <a href="#">HTML</a>
        </li>
        <li>
            <a href="#">CSS</a>
        </li>

        <li>
            <a href="#">Javascript</a>
        </li>
        <li>
            <a href="#">AJAX</a>
        </li>
    </ul>
</div>
<hr/>


<!-- 2.5 输入框组 -->
<!-- 基本组合 -->
<div style="margin: 50px">
    <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" placeholder="username" aria-describedby="basic-addon1"/>
    </div>
    <div class="input-group">
        <input type="text" class="form-control" placeholder="mail" aria-describedby="basic-addon2"/>
        <span class="input-group-addon">@gmail.com</span>
    </div>
    <div class="input-group">
        <span class="input-group-addon">$</span>
        <input type="text" class="form-control" placeholder="money" aria-describedby="basic-addon3"/>
        <span class="input-group-addon">.00</span>
    </div>
</div>
<br/>
<!-- 尺寸 -->
<div style="margin: 50px">
    <div class="input-group-lg">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" placeholder="username" aria-describedby="basic-addon1"/>
    </div>
    <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" placeholder="username" aria-describedby="basic-addon1"/>
    </div>
    <div class="input-group-sm">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" placeholder="username" aria-describedby="basic-addon1"/>
    </div>
    <div class="input-group-xs">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" placeholder="username" aria-describedby="basic-addon1"/>
    </div>
</div>
<!-- 复选框和单选框 -->
<div class="input-group">
    <span class="input-group-addon">
        <input type="checkbox"/>
    </span>
    <input type="text" class="form-control"/>
</div>
<div class="input-group">
    <span class="input-group-addon">
        <input type="radio"/>
    </span>
    <input type="text" class="form-control"/>
</div>


<!-- 2.6 导航栏 -->
<!-- 标签页 -->
<ul class="nav nav-tabs">
    <li class="active"><a href="#">html</a></li>
    <li><a href="#">css</a></li>
    <li><a href="#">js</a></li>
</ul>
<!-- 胶囊式标签页 -->
<ul class="nav nav-pills">
    <li class="active"><a href="#">html</a></li>
    <li><a href="#">css</a></li>
    <li><a href="#">js</a></li>
</ul>
<!-- 垂直胶囊式标签页 -->
<ul class="nav nav-pills nav-stacked">
    <li class="active"><a href="#">html</a></li>
    <li><a href="#">css</a></li>
    <li><a href="#">js</a></li>
</ul>
<!-- 含有禁用的链接 -->
<ul class="nav nav-tabs">
    <li class="active"><a href="#">html</a></li>
    <li><a href="#">css</a></li>
    <li><a href="#">js</a></li>
    <li class="disabled"><a href="#">bootstrap</a></li>
</ul>
<!-- 2.7 面包屑导航 -->
<ol class="breadcrumb">
    <li><a href="#">html</a></li>
    <li><a href="#">css</a></li>
    <li><a href="#" class="active">js</a></li>
</ol>


<!-- 2.8 分页 -->
<!-- 基本分页 -->
<ul class="pagination">
    <li>
        <a href="#" aria-label="previous">
            <span aria-hidden="true">&laquo;</span>
        </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li>
        <a href="#" aria-label="next">
            <span aria-hidden="true">&raquo;</span>
        </a>
    </li>
</ul>
<br/>
<!-- 禁用和激活状态 -->
<ul class="pagination">
    <li>
        <a href="#" aria-label="previous">
            <span aria-hidden="true">&laquo;</span>
        </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li class="disabled">
        <a href="#" aria-label="next">
            <span aria-hidden="true">&raquo;</span>
        </a>
    </li>
</ul>
<hr/>
<!-- 大小 -->
<ul class="pagination pagination-lg">
    <li>
        <a href="#" aria-label="previous">
            <span aria-hidden="true">&laquo;</span>
        </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li>
        <a href="#" aria-label="next">
            <span aria-hidden="true">&raquo;</span>
        </a>
    </li>
</ul>
<br/>
<ul class="pagination pagination-sm">
    <li>
        <a href="#" aria-label="previous">
            <span aria-hidden="true">&laquo;</span>
        </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li>
        <a href="#" aria-label="next">
            <span aria-hidden="true">&raquo;</span>
        </a>
    </li>
</ul>
<br/>
<ul class="pagination pagination-xs">
    <li>
        <a href="#" aria-label="previous">
            <span aria-hidden="true">&laquo;</span>
        </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li>
        <a href="#" aria-label="next">
            <span aria-hidden="true">&raquo;</span>
        </a>
    </li>
</ul>
<hr/>
<!-- 翻页 -->
<nav>
    <ul class="pager">
        <li><a href="#">上一页</a></li>
        <li><a href="#">下一页</a></li>
    </ul>
</nav>
<br/>
<!-- 两端对齐 -->
<nav>
    <ul class="pager">
        <li class="previous"><a href="#">&larr;上一页</a></li>
        <li class="next"><a href="#">&rarr;下一页</a></li>
    </ul>
</nav>
<br/>
<!-- 翻页禁用状态 -->
<nav>
    <ul class="pager">
        <li class="disabled"><a href="#">上一页</a></li>
        <li><a href="#">下一页</a></li>
    </ul>
</nav>
<hr/>


<!-- 2.9 标签 -->
<span class="label label-default">default</span>
<span class="label label-primary">primary</span>
<span class="label label-success">success</span>
<span class="label label-info">info</span>
<span class="label label-warning">warning</span>
<span class="label label-danger">danger</span>
<hr/>


<!-- 2.10 徽章 -->
<a href="#">新的消息<span class="badge">777</span> </a>
<button class="btn btn-danger">
    未读消息<span class="badge">999</span>
</button>
<hr/>


<!-- 2.11 超大屏幕 -->
<div class="jumbotron">
    <div class="container" align="center">
        <h2 class="text-info" style="font-family: 宋体;font-weight: bold;font-size: 50px">呵呵</h2><br/>
        <div class="text-muted">欢乐时光就要开始了</div>
        <br/>
        <p><a href="#" class="btn btn-info">注册</a></p>
    </div>
</div>
<hr/>


<!-- 2.12 副标题 -->
<div class="page-header">
    <h1>正标题
        <small>副标题</small>
    </h1>
</div>
<hr/>


<!-- 2.13 副标题 -->
<!-- 相册风格 -->
<div class="container">
    <div class="row">
        <div class="col-xs-3">
            <a href="#" class="thumbnail">
                <img src="http://how2j.cn/study/gareen.jpg"/>
            </a>
        </div>
        <div class="col-xs-3">
            <a href="#" class="thumbnail">
                <img src="http://how2j.cn/study/annie.jpg"/>
            </a>
        </div>
        <div class="col-xs-3">
            <a href="#" class="thumbnail">
                <img src="http://how2j.cn/study/teemo.jpg"/>
            </a>
        </div>
        <div class="col-xs-3">
            <a href="#" class="thumbnail">
                <img src="http://how2j.cn/study/katarina.jpg"/>
            </a>
        </div>
    </div>
</div>
<br/>
<!-- 自定义风格 -->
<div class="container">
    <div class="row">
        <div class="col-xs-3 ">
            <a href="#" class="thumbnail">
                <img src="http://how2j.cn/study/gareen.jpg"/>
            </a>
            <div class="caption">
                <div class="text-muted">德玛西亚之力</div>
                <br/>
                <p><a href="#" class="btn btn-primary" role="button">选中</a></p>
            </div>
        </div>
        <div class="col-xs-3 ">
            <a href="#" class="thumbnail">
                <img src="http://how2j.cn/study/annie.jpg"/>
            </a>
            <div class="caption">
                <div class="text-muted">黑暗之力</div>
                <br/>
                <p><a href="#" class="btn btn-primary" role="button">选中</a></p>
            </div>
        </div>
        <div class="col-xs-3 ">
            <a href="#" class="thumbnail">
                <img src="http://how2j.cn/study/teemo.jpg"/>
            </a>
            <div class="caption">
                <div class="text-muted">迅捷斥候</div>
                <br/>
                <p><a href="#" class="btn btn-primary" role="button">选中</a></p>
            </div>
        </div>
        <div class="col-xs-3 ">
            <a href="#" class="thumbnail">
                <img src="http://how2j.cn/study/katarina.jpg"/>
            </a>
            <div class="caption">
                <div class="text-muted">不详之刃</div>
                <br/>
                <p><a href="#" class="btn btn-primary" role="button">选中</a></p>
            </div>
        </div>
    </div>
</div>
<hr/>


<!-- 2.13 警告 -->
<!-- 警告框 -->
<div class="alert alert default">default</div>
<div class="alert alert success">success</div>
<div class="alert alert info">info</div>
<div class="alert alert warning">warning</div>
<div class="alert alert danger">danger</div>
<div class="alert alert primary">primary</div>
<!-- 可关闭的警告框 -->
<div class="alert alert-warning alert-dismissible">
    <button class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span></button>
    警告提示
</div>
<!-- 警告框中的链接 -->
<div class="alert alert-success">
    <span>欢乐时光就要开始了</span><a href="#" class="alert-link">快来呀</a>
</div>


<!-- 2.14 进度条 -->
<!-- 基本进度条 -->
<div class="progress">
    <div class="progress-bar" style="width: 70%;"></div>
</div>
<!-- 带提示的进度条 -->
<div class="progress">
    <div class="progress-bar" style="width: 60%; min-width: 2em">60%</div>
</div>
<!-- 颜色 -->
<div class="progress">
    <div class="progress-bar progress-bar-danger" style="width: 50%">50%</div>
</div>
<!-- 条纹 -->
<div class="progress">
    <div class="progress-bar progress-bar-success progress-bar-striped" style="width: 40%">40%</div>
</div>
<!-- 发廊 -->
<div class="progress">
    <div class="progress-bar progress-bar-striped active" style="width: 40%">40%</div>
</div>
<!-- 堆叠 -->
<div class="progress">
    <div class="progress-bar progress-bar-success" style="width: 30%"></div>
    <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%"></div>
    <div class="progress-bar progress-bar-danger" style="width: 10%"></div>
</div>
<hr/>


<!-- 2.15 列表组 -->
<!-- 基本列表组 -->
<div>
    <ul class="list-group">
        <li class="list-group-item">html</li>
        <li class="list-group-item">css</li>
        <li class="list-group-item">js</li>
    </ul>
</div>
<!-- 带标记 -->
<div>
    <ul class="list-group">
        <li class="list-group-item"><span class="badge">11</span> html</li>
        <li class="list-group-item"><span class="badge">22</span> css</li>
        <li class="list-group-item"><span class="badge">33</span> js</li>
    </ul>
</div>
<!-- 链接 -->
<div class="list-group">
    <a href="#" class="list-group-item">html</a>
    <a href="#" class="list-group-item">css</a>
    <a href="#" class="list-group-item active">js</a>
</div>
<!-- 按钮 -->
<div class="list-group">
    <button class="list-group-item">html</button>
    <button class="list-group-item active">css</button>
    <button class="list-group-item">js</button>
</div>
<!--颜色 -->
<div class="list-group">
    <a href="#" class="list-group-item list-group-item-primary">html</a>
    <a href="#" class="list-group-item list-group-item-info">css</a>
    <a href="#" class="list-group-item list-group-danger active">js</a>
</div>
<hr/>


<!-- 2.16 面板 -->
<!-- 基本面板 -->
<div class="panel panel-default">
    <div class="panel-body">
        面板内容
    </div>
</div>
<!-- 面板标题 -->
<div class="panel panel-default">
    <div class="panel-heading">标题</div>
    <div class="panel-body">
        内容
    </div>
</div>
<!-- 面板脚注 -->
<div class="panel panel-success">
    <div class="panel-body">
        内容
    </div>
    <div class="panel-footer">脚注</div>
</div>
<!-- 颜色 -->
<div class="panel panel-danger">
    <div class="panel-heading">标题</div>
    <div class="panel-body">内容</div>
</div>
<hr/>


<!-- 2.17 嵌入效果 -->
<div class="well">嵌入状态的文字内容</div>
<hr/>


<!-- 2.18 顶部底部 -->
<!-- 贴在顶部不消失 -->
<nav class="navbar navbar-default navbar-fixed-top">
    <button class="btn btn-info">菜单</button>
</nav>
<div style="white-space: pre">
    内容
    内容
    内容
</div>
<!-- 贴在顶部会消失 -->
<nav class="navbar navbar-default navbar-static-top">
    <button class="btn btn-info">菜单</button>
</nav>
<div style="white-space: pre">
    内容
    内容
    内容
</div>
<!-- 贴在底部不消失 -->
<div style="white-space: pre; margin-bottom:80px">
    内容
    内容
    内容
</div>
<nav class="navbar navbar-default navbar-fixed-bottom">
    <button class="btn btn-info">版权所有@</button>
</nav>
</body>
</html>